<template>
  <!-- 专业分布 -->
  <view>
    <view class="styleJobDescriptionContainer">
      <view class="styleJobDescriptionTitleContainer">
        <view class="styleJobDescriptionTitleLine"></view>
        <view class="styleJobDescriptionTitle"> {{ title }}</view>
      </view>
      <view v-if="professionList.length > 0" class="professionList">
        <view
          class="profession-item"
          v-for="(item, index) in professionList.slice(0, 8)"
          :key="index"
          @click="jumpToMajorDeatil(item)"
          >{{ item.tagName }}
        </view>
      </view>

      <Empty
        v-else
        :baseImg="emptyImg"
        :text="emptyTitle"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </view>
</template>
<script>
import {
  getLayerDetailsData,
  getJobDescriptionData
} from '@/api/modules/career';
import Empty from '@/components/Empty.vue';
import LoginDialog from '@/components/LoginDialog';

export default {
  components: {
    Empty,
    LoginDialog
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    positionId: {
      type: String,
      default: ''
    },
    layerId: {
      type: String,
      default: null
    },
    positionName: {
      type: String,
      default: ''
    },
    pageName: {
      type: String,
      default: ''
    },
    isAuthSetting: {
      type: Boolean,
      default: false
    },
    personId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      listJobDescriptions: [],
      professionList: [],
      emptyTitle: '暂无数据',
      textareaHeight: false, // false表示隐藏 true 表示全部展示
      showMajorIntroduction: '',
      majorIntroduction:
        '本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计'
    };
  },
  mounted() {
    // this.checkAuthSetting();
    this.getLayerDetail();
    this.getJobDescriptionDataFn();
    console.log(
      'personId',
      this.personId,
      'isAuthSetting',
      this.isAuthSetting,
      this.title
    );
    if (this.title == '专业分布') {
      this.emptyTitle = '暂未上线，敬请期待~';
    }
  },
  methods: {
    changeHeight(type) {
      if (type == 'introduction') {
        if (this.textareaHeight) {
          this.showMajorIntroduction = this.majorIntroduction.substring(0, 50);
        } else {
          this.showMajorIntroduction = this.majorIntroduction;
        }
        this.textareaHeight = !this.textareaHeight;
      } else {
        if (this.classAreaHeight) {
          this.showCurriculum = this.curriculum.substring(0, 50);
        } else {
          this.showCurriculum = this.curriculum;
        }
        this.classAreaHeight = !this.classAreaHeight;
      }
    },
    jumpToMajorDeatil(item) {
      console.log('item', item);
      uni.navigateTo({
        url:
          `/pagesSub/careerNew/majorDetail/index?positionTagId=` +
          item.positionTagId
      });
    },
    async getJobDescriptionDataFn() {
      const params = {
        id: this.positionId,
        layerIds: this.layerId
      };
      const res = await getJobDescriptionData(params);
      if (res.code == 200) {
        // console.log("res", res);
        this.professionList = res.data[0].data;
        // console.log("this.professionList", this.professionList);
      } else {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
      }
    },
    checkAuthSetting() {
      uni.getSetting({
        success: (res) => {
          if (res && res.authSetting && res.authSetting['scope.userInfo'])
            this.isAuthSetting = true;
        }
      });
    },
    showLoginDialog() {
      console.log('showLoginDialog', this.personId);
      if (this.personId) {
        this.$emit('refreshData');
      } else {
        this.$refs.loginDialog.setVisibility(true);
      }
    },
    iconPng(item) {
      // let matchedIcon = IconList.find((icon) => icon.name === item.title);
      // if (matchedIcon) {
      //   return `../../../../static/positionIcon/${matchedIcon.path}.png`;
      // } else
      if (item.icon) {
        return item.icon;
      } else {
        return 'https://upload.yl1001.com/upload/files/view?file=rV_omNEGqOmTLZlj8s6j9in1FZNH8ioN-ywOXbrGAQnOCxBB_mZK_OhQXlXsX.png';
      }
    },
    loginSuccessBack() {
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      });
      this.$emit('refreshData');
    },
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      const params = {
        id: this.positionId,
        layerIds: this.layerId
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.listJobDescriptions = res.data[0].children;
            // console.log(
            //   "res111" + this.title,
            //   this.listJobDescriptions,
            //   this.listJobDescriptions.length
            // );
          } else {
            console.log('请求失败');
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    clickJobDescriptionItem(index, item) {
      console.log('clickJobDescriptionItem', index, item);
      uni.navigateTo({
        url:
          '/pagesSub/careerNew/positionDictionary/JobDescriptionDetail?layerId=' +
          item.layerId +
          '&title=' +
          item.title +
          '&isNeedBuy=true&positionId=' +
          this.positionId +
          '&positionName=' +
          this.positionName +
          '&oriPrice=' +
          item.oriPrice +
          '&price=' +
          item.price +
          '&pageName=' +
          this.pageName
      });
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
.styleJobDescriptionContainer {
  background-color: white;
  border-radius: 16rpx;
  padding-top: 32rpx;
  padding-bottom: 28rpx;
  margin: 24rpx 16rpx;
  .styleJobDescriptionTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 24rpx;

    .styleJobDescriptionTitleLine {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }

    .styleJobDescriptionTitle {
      color: #222222;
      font-size: 32rpx;
      font-weight: 800;
    }
  }

  .professionList {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 24rpx 24rpx 0 24rpx;

    .profession-item {
      height: 76rpx;
      background: #edf4ff;
      border-radius: 12rpx;
      align-items: center;
      margin-right: 14rpx;
      margin-bottom: 24rpx;
      padding: 18rpx 24rpx;
      box-sizing: border-box;
      text-align: center;
    }
  }

  .styleGridJobDescriptionItem {
    .styleGridJobDescriptionItemIcon {
    }

    .styleGridJobDescriptionItemText {
      margin-top: 6rpx;
      color: #555555;
      font-size: 24rpx;
    }

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
span-ios {
  width: 150rpx;
  margin-top: 19rpx;
}

span-android {
  width: 150rpx;
  margin-top: 5rpx;
}

.introduction {
  /* flex-grow: 1; */
  width: 470rpx;
  overflow: hidden;
  /* max-height: 84rpx; */
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
  font-family: D-DIN-PRO, D-DIN-PRO;
  padding: 0;
}

.my-introduction {
  width: 470rpx;
  white-space: pre-wrap;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
  font-family: D-DIN-PRO, D-DIN-PRO;
}

.glass {
  width: 20rpx;
  height: 100%;
  position: absolute;
  right: 32rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.lm-wechat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  ::v-deep button {
    background-color: transparent;
    padding: 0 !important;
    border: none;
    height: 100%;
  }

  ::v-deep .u-loading::after {
    background-color: transparent;
  }
}
</style>
